<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/neighborList.css" />
</head>

<body>
	<div class="loading-warpper" id="loading">
		<div class="loading">
			<div class="item1"></div>
			<div class="item2"></div>
		</div>
	</div>
	<header class="header-fiexd mui-bar">
	<!-- 	<div id="header"></div> -->
		<div class="header">
			<a class="mui-action-back mui-icon mui-icon mui-icon-arrowleft"></a>
			<h1 class="mui-title" id="title" style="opacity: 0;">小区活动</h1>
			<div class="mui-right" id="my">我的活动</div>
		</div>
	</header>
	<div id="mescroll" class="mescroll">
		<div class="" >
			<div class="activity p-b-15">
				<!-- <div id="content"></div> -->
				<div class="header-title">小区活动</div>
				<div class="list" v-if="list.length > 0">
					<div class="item m-b-15" v-for="item in list" @click="itemTap(item.actID)">
						<div class="item-title">
							<span v-if="item.actStatus == 1"  style="color: #fcc747;">未开始</span>
							<span v-if="item.actStatus == 2"  style="color: #DD524D;">进行中</span>
							<span v-if="item.actStatus == 3"  style="color: #999;">已结束</span>
							<span>#</span>
							<span v-text="item.actTitle"></span>
						</div>
						<div class="item-image">
							<img class="item-br" :imgurl="item.filesPath" src="../../../images/jiazai.gif" />
						</div>
						<div class="item-desc">
							<div class="item-time">
								<img src="../../../images/timg.png">
								<span>{{item.actStartTime | dateFormat}} — {{item.actEndTime | dateFormat}}</span>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- <div class="issue" id="issue">
		<div class="issue-iocn">
			<img src="../../../images/neighbor/add.png">
		</div>
	</div> -->
	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../data-js/home.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		var mescroll;
		var title = document.getElementById('title');
		mui.plusReady(function () {
			// Util.StatusbarHeight('header');
			// Util.StatusbarHeight('content');
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			var neiID = Util.getState('hosing').neiID
			if (!neiID) {
				plus.nativeUI.confirm("您尚未完善业主信息，是否去完善？", function (e) {
					if (e.index == 0) {
						perfectUser()
					} else {
						mui.back()
					}
				})
				return
			}

			mescroll = new MeScroll("mescroll", {
				down: {
					auto: false,
					callback: downCallback,
					outOffsetRate: 0.01
				},
				up: {
					callback: upCallback,
					page: {
						num: 0,
						size: 10
					},
					lazyLoad: {
						use: true,
						attr: 'imgurl',
						showClass: 'mescroll-lazy-in',
						delay: 500,
						offset: 200
					},
					noMoreSize: 3,
					empty: {
						warpId: "mescroll",
						icon: "../../../images/zanwu.png",
						tip: "还没有人发布呢~",
						btntext: "",
						btnClick: null,
						supportTap: false
					},
					htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
					onScroll: function (mescroll, y, isUp) {
						var height = 30
						if (y > height) {
							var opacity = y / 140
							opacity = opacity > 1 ? 1 : opacity
							title.style.opacity = opacity
						} else {
							title.style.opacity = 0
						}
					}
				}
			})
		})

// 		mui("#issue")[0].addEventListener("tap", function () {
// 			mui.openWindow({
// 				url: 'issue.html',
// 				id: 'issue.html',
// 				styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
// 					titleNView: { // 窗口的标题栏控件
// 						titleText: '活动发布', // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题        
// 						backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
// 						autoBackButton: true,
// 					}
// 				},
// 				waiting: {
// 					autoShow: false
// 				}
// 			})
// 		})
		
		mui("#my")[0].addEventListener("tap",function () {
			mui.openWindow({
				url: 'myJoin.html',
				id: 'myJoin.html',
				styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
					titleNView: { // 窗口的标题栏控件
						titleText: '我参加的', // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
						titleSize: "17px", // 字体大小,默认17px
						backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
						autoBackButton: true
					}
				},
				waiting: {
					autoShow: false
				}
			})
		})
		
		function perfectUser() {
			mui.openWindow({
				url: '../../../register/perfectUser.html',
				id: 'perfectUser',
				styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
					titleNView: { // 窗口的标题栏控件
						titleText: "完善业主信息", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
						titleSize: "17px", // 字体大小,默认17px
						backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
						autoBackButton: true,
						splitLine: { // 标题栏控件的底部分割线，类似borderBottom
							color: "#eeeeee", // 分割线颜色,默认值为"#CCCCCC"  
							height: "1px" // 分割线高度,默认值为"2px"
						}
					}
				},
			})
		}

		var app = new Vue({
			el: "#mescroll",
			data: {
				list: []
			},
			filters: {
				dateFormat: function (value){
					var list = value.split(" ")
					var _list = list[0].split("-")
					return _list[1] + '月' + _list[2] + '日' + " " + list[1]
				}
			},
			methods: {
				itemTap: function (id) {
					mui.openWindow({
						url: 'details.html',
						id: 'details.html',
						styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
							titleNView: { // 窗口的标题栏控件
								titleText: "活动详情", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								autoBackButton: true
							}
						},
						extras: {
							actID: id,
						},
					})
				}
			},
		})

		window.addEventListener('issueBack', function (msg) {
			//自定义方法，刷新数据，不刷新页面
			downCallback();
		})
		
		window.addEventListener('perfectUser',function(){
			console.log('触发')
			mui.back()
		})

		function downCallback() {
			app.list = []
			mescroll.resetUpScroll();
		}

		function upCallback(page) {
			mui.post(Util.HTTP + 'api/Activity/GetActivity', {
				neiID: Util.getState('hosing').neiID,
				page: page.num,
				number: page.size
			}, function (res) {
				if (res.code == 1001) {
					console.log(res.data.length)
					mescroll.endSuccess(res.data.length);
					app.list = app.list.concat(res.data)
					document.getElementById('loading').style.display = 'none'
				} else {
					mui.toast(res.message)
				}
			})
		}
	</script>
</body>

</html>
